<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LXQ BLOG</title>
    <link rel="stylesheet" href="css/theme.css">
    <script src="js/vue.min.js"></script>
    <style>
        .blog_ul{
            width: 1000px;
            margin: 50px auto;
        }
        body{
            background-color: #f4f5f7;
        }

        .blog_li{
            background-color: white;
            padding: 20px;
            margin: 10px auto;
            display: flex;
        }
        .blog_li .cover{
            width: 150px;
        }
        .blog_li_text{
            position: relative;
            width: 830px;
            margin-left: 20px;
        }
        .blog_li_info{
            position:absolute;
            bottom: 0px;
        }
        .blog_href{
            position:absolute;
            bottom: 0px;
            right: 0px;
        }
    </style>
</head>
<body>
    <ul class="blog_ul" id='blog_ul'>
        <li v-for="blog in blogs" class="blog_li">
            <img class="cover" :src="blog.cover" alt="">
            <div class="blog_li_text">
                <h2>{{blog.title}}</h2>
                <p>{{blog.description}}</p>
                <span class="blog_li_info">发布日期：{{blog.date}} | 阅读量：{{blog.reading}} | 点赞：{{blog.thumb}}</span>
                <a target="_blank" class="blog_href" :href="'/blog_detail.html?id='+blog.id">点击查看</a>
            </div>
        </li>
    </ul>
    <script>

        fetch('/blogs',{method:'get'}).then(resp=>{
            resp.json().then(blogData=>{
                new Vue({
                    el:'#blog_ul',
                    data:{
                        blogs:blogData
                    }
                })
            })
        })

    </script>
</body>
</html>
</html>